<template>
  <div>
    <NavBar>
      <template v-slot:default>{{isReg ? '注册' : '登录'}}</template>
    </NavBar>
    <div class="container">
      <!-- logo -->
      <van-image width="100" height="100" lazy-load :src="require('assets/images/computer.png')" />
      <div v-if="isReg">
        <!-- 注册 -->
        <van-form @submit="registerSubmit">
          <van-field v-model="registerInfo.name" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="registerInfo.password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
          <van-field v-model="registerInfo.password_confirmation" type="password" name="确认密码" label="确认密码" placeholder="确认密码" :rules="[{ required: true, message: '请填写密码' }]" />
          <van-field v-model="registerInfo.email" name="电子邮箱" label="电子邮箱" placeholder="电子邮箱" :rules="[{ required: true, message: '请填写正确格式电子邮箱' }]" />
          <p class="tips" @click="changePage">已有账号，立即登录</p>
          <div style="margin: 16px;">
            <van-button round block type="primary" color="#07c160" native-type="submit">注册</van-button>
          </div>
        </van-form>
      </div>
      <div v-else>
        <!-- 登录 -->
        <van-form @submit="loginSubmit">
          <van-field v-model="loginInfo.email" name="电子邮箱" label="电子邮箱" placeholder="电子邮箱" :rules="[{ required: true, message: '请填写正确格式电子邮箱' }]" />
          <van-field v-model="loginInfo.password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
          <p class="tips" @click="changePage">立即注册</p>
          <div style="margin: 16px;">
            <van-button round block type="primary" color="#07c160" native-type="submit">登录</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>

</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import { ref, reactive, watchEffect, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Notify, Toast } from "vant";
import Utils from "utils";
import { userRegister, userLogin } from "network/user.js";
import store from "../../store";

export default {
  name: "register",
  setup(props) {
    let route = useRoute();
    let router = useRouter();
    let isReg = ref(false);
    let fromInfo = reactive({
      loginInfo: {
        email: "",
        password: "",
      },
      registerInfo: {
        name: "",
        password: "",
        email: "",
        password_confirmation: "",
      },
    });

    const loginSubmit = async (values) => {
      Utils.checkBaseFrom(fromInfo.loginInfo)
        .then(() => {
          userLogin(fromInfo.loginInfo).then((res) => {
            if (res.access_token) {
              Toast.success("登录成功");
              store.commit("setToken", res.access_token);
              store.commit("setToken_type", res.token_type);
              store.dispatch("updateCartsCount");
              // window.localStorage.setItem("token", res.access_token);
              setTimeout(() => {
                router.go(-1);
              }, 1000);
              fromInfo.loginInfo.email = "";
              fromInfo.loginInfo.password = "";
            }
          });
        })
        .catch((err) => {
          Notify(err);
        });
    };

    const registerSubmit = (values) => {
      Utils.checkBaseFrom(fromInfo.registerInfo)
        .then(() => {
          userRegister(fromInfo.registerInfo).then((res) => {
            if (res.status === 201) {
              Toast.success("注册成功");
              setTimeout(() => {
                isReg.value = false;
              }, 1000);
              fromInfo.registerInfo.password = "";
              fromInfo.registerInfo.password_confirmation = "";
            }
          });
        })
        .catch((err) => {
          Notify(err);
        });
    };

    watchEffect(() => {
      document.title = isReg.value ? "图书星弟-注册" : "图书星弟-登录";
    });

    return {
      isReg,
      changePage: () => (isReg.value = !isReg.value),
      ...toRefs(fromInfo),
      loginSubmit,
      registerSubmit,
    };
  },
  components: {
    NavBar,
  },
};
</script>

<style lang="scss" scoped>
.container {
  .van-image {
    margin: 50px 0px;
  }
  .tips {
    padding: 10px 16px;
    text-align: left;
    color: #1989fa;
    font-size: 14px;
  }
}
</style>